<template>
  <div class="overview">
    <div class="box-big-data">
      <div class="box-big-data-head">
        <h1>运行状态</h1>
        <div class="box-big-data-time">
          <span>{{ nowDate }}</span>
        </div>
        <div class="refereh">
        </div>
      </div>
      <div class="box-big-data-board">
        <ul class="board-ul">
          <li
            v-for="item in boardList"
            :key="item.id"
            :label="item.title"
            :name="item.id"
            :style="{ width: `${100 / ((boardList.length * 5) / 4.5)}%` }"
            class="board-ul-item"
          >
            <div class="board-cont fora">
              <h4 class="title">{{ item.title }}</h4>
              <div class="item-line">
                <span
                  class="number"
                  :style="{color: item.numberColor ? item.numberColor : '#07e5ff'}"
                >
                  {{ item.number }}
                </span>
                <em class="unit">{{ item.unit }}</em>
              </div>
              <div class="item-line">
                <span class="desc">{{ item.subTitle }}</span>
              </div>
              <span class="forb"></span>
            </div>
          </li>
        </ul>
      </div>
      <div class="box-big-data-charts">
        <ul class="charts-ul">
          <li
            class="chart-item"
            v-for="item in chartList"
            :key="item.id"
            :style="{ width: item.width ? item.width : '50%' }"
          >
            <div class="chart-item-cont">
              <div class="head">
                <h4 class="title">
                  <span class="title-a">
                    {{item.title || 暂无数据}}
                  </span>
                </h4>
                <a class="link">下钻</a>
                <a class="xiazuan">
                  <span>返回</span>
                </a>
              </div>
              <div class="chart-cont" v-if="item.chartOpt">
                <chart-view :chartOption="item.chartOpt" :height="item.height" :auto-resize="true" :play-highlight="item.playHighlight" />
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/gauge'
import 'echarts/lib/chart/line'

let color0 = '#3776db'
let color1 = '#3776db'
// if (e < 33) {
//   color1 = "#3776db"
// } else if (e < 80) {
//   color1 = "#a2cdf7"
// } else {
//   color1 = "#dc3226"
// }
  const process = 40 // 进度
  export default {
    name:'OverviewData',
    data () {
      return {
        nowDate: '', // 当前时间
        boardList: [
          {
            id: 1,
            title: '机器数',
            number: 1358,
            numberColor: '#ff6316',
            unit: '台',
            subTitle: '较上月上升 21台',
          },
          {
            id: 2,
            title: '当前连接数',
            number: 1376,
            numberColor: '#ffe400',
            unit: '人次',
            subTitle: '较上月上升 30人次',
          },
          {
            id: 3,
            title: '机器运行天数',
            number: 74,
            numberColor: '#07e5ff',
            unit: '天',
            subTitle: '较昨日上升',
          },
        ],
        chartList: [
          {
            id: '111',
            title:'内存运行情况',
            height: '200px',
            playHighlight: false,
            chartOpt: {
              grid: {
                x: 42,
                y: 20,
                x2: 15,
                y2: 30,
                borderWidth: 1,
              },
              xAxis: {
                type: 'category',
                axisLabel : {
                  show:true,
                  interval: 'auto',    // {number}
                  textStyle: {
                    color: '#eee',
                    fontFamily: 'verdana',
                    fontSize: 10,
                    fontStyle: 'normal',
                  }
                },
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
              },
              yAxis: {
                type: 'value',
                axisLabel : {
                  show:true,
                  interval: 'auto',    // {number}
                  textStyle: {
                    color: '#fff',
                    fontFamily: 'verdana',
                    fontSize: 10,
                    fontStyle: 'normal',
                  }
                },
              },
              series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
              }]
            },
            data: []
          },
          {
            id: '222',
            title:'硬盘运行情况',
            height: '200px',
            playHighlight: true,
            chartOpt: {
              // color: ['#36CBCB', '#FAD337', '#F2637B', '#975FE4'],
              grid: null,
              tooltip:  {
                show: true
              },
              xAxis:null,
              yAxis: null,
              title: '',
              tooltip : {
                trigger: 'axis'
              },
              calculable : true,
              series: [
                {
                  name:'硬盘运行情况',
                  type: 'pie',
                  radius: ['50%', '60%'],
                  center: ['50%', '45%'],
                  hoverAnimation: true,
                  z: 10,
                  tooltip : {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}G({d}%)'
                  },
                  itemStyle: {
                    normal: {
                      labelLine : {
                          length : 2
                      },
                      borderWidth: 2,
                      borderColor: '#fff'
                    }
                  },
                  label: {
                    show: true
                  },
                  data: [
                    {value:1024*10, name:'FAT',path: '/'},
                    {value:1024*5, name:'NTFS',path: '/d'},
                    {value:1024*2, name:'exfat',path: '/e'},
                    {value:1024*1, name:'其他',path: '/test'}
                  ],
                }
              ]
            },
            data: []
          },
          {
            id: '333',
            title:'cpu运行情况',
            width: '100%',
            height: '200px',
            playHighlight: false,
            chartOpt: {
              tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c}%"
              },
              legend: {
                textStyle: {color: '#fff'},
                x: '20%', // 'center' | 'left' | {number},
                y: 'top', // 'center' | 'bottom' | {number}
                data:['运行轨迹']
              },
              calculable : true,
              // toolbox: {
              //   show : true,
              //   y: 'top',
              //   itemSize: 10, // 设置图标大小
              //   iconStyle: {
              //     borderColor: "#fff",  // 图标默认颜色
              //   },
              //   emphasis: {
              //     iconStyle: {
              //       borderColor: "#54C3F1",  // 图标hover颜色
              //     },
              //   },
              //   feature : {
              //     mark : {show: true},
              //     dataView : {show: true, readOnly: false},
              //     magicType : {show: true, type: ['line', 'gauge']},
              //     restore : {show: true},
              //     saveAsImage : {show: true}
              //   }
              // },
              grid: {
                x: '20%',
                y: 40,
                x2: 65,
                y2: 30,
                borderWidth: 1,
              },
              xAxis : [
                {
                    type : 'category',
                    splitLine : {show : false},
                    axisLabel : {
                      show:true,
                      interval: 'auto',    // {number}
                      // rotate: 45,
                      // margin: 8,
                      // formatter: '{value}月',
                      textStyle: {
                        color: '#fff',
                        fontFamily: 'sans-serif',
                        fontSize: 12,
                        fontStyle: 'italic',
                      }
                    },
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
              ],
              yAxis : [
                {
                  type : 'value',
                  position: 'right',
                  axisLabel : {
                    show:true,
                    interval: 'auto',    // {number}
                    // rotate: -45,
                    // margin: 18,
                    // formatter: '{value} ml',    // Template formatter!
                    textStyle: {
                      color: '#1e90ff',
                      fontFamily: 'verdana',
                      fontSize: 10,
                      fontStyle: 'normal',
                      fontWeight: 'bold'
                    }
                  },
                }
              ],
              series : [
                {
                    name:'CPU状态',
                    type:'gauge',
                    center : ['10%', '50%'],    // 默认全局居中
                    radius : '80%',
                    min:0,
                    max:100,
                    splitNumber:5,
                    axisLine: {            // 坐标轴线
                      lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
                        width: 2,
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 6
                      }
                    },
                    axisLabel: {            // 坐标轴小标记
                      textStyle: {       // 属性lineStyle控制线条样式
                        color: '#fff',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 6
                      }
                    },
                    axisTick: {            // 坐标轴小标记
                      length :8,        // 属性length控制线长
                      lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 6
                      }
                    },
                    splitLine: {           // 分隔线
                      length :15,         // 属性length控制线长
                      lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        width:2,
                        color: '#fff',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 6
                      }
                    },
                    pointer: {           // 分隔线
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 3
                    },
                    title : {
                      textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontSize: 12,
                        fontStyle: 'italic',
                        color: '#fff',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 5
                      }
                    },
                    detail : {
                      // backgroundColor: 'rgba(30,144,255,0.8)',
                      // borderWidth: 1,
                      borderColor: '#fff',
                      shadowColor : '#fff', //默认透明
                      shadowBlur: 5,
                      offsetCenter: [0, '90%'],       // x, y，单位px
                      textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        color: '#fff'
                      },
                      formatter:'{value}%'
                    },
                    data:[{value: 60, name: '使用率'}]
                },
                {
                    name:'运行轨迹',
                    type:'line',
                    data:[862, 1018, 964, 1026, 1679, 1600, 1570],
                    markPoint : {
                      data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                      ]
                    },
                    markLine : {
                      data : [
                        {type : 'average', name: '平均值'}
                      ]
                    }
                },
              ]
            },
            data: []
          },
          {
            id: '444',
            title:'进程情况',
            width: '100%',
            height: '200px',
            playHighlight: false,
            chartOpt:{
              title: {
                show: true,
                text: process + "%",
                x: "center",
                y: "center",// 通过x,y将标题(进度)定位在圆环中心
                textStyle: {
                  fontSize: "25",
                  color: "white",
                  fontWeight: "400",
                  fontFamily: "DINPro, DINPro-Regular",
                },
              },
              tooltip: {
                show: false,
                formatter: function (params) {
                  return '<span style="color: #333;">占比：' + params.value + '%</span>'
                }
              },
              legend: {
                orient: 'vertical',
                x: 'left',
                show: false
              },
              series : [
                {
                  name: "",
                  type: "pie",
                  radius: ["65%", "85%"],
                  avoidLabelOverlap: true,
                  hoverAnimation: false,
                  label: {
                    normal: {
                      show: false,
                      position: "center",
                    },
                    emphasis: {
                      show: false,
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false,
                    },
                  },
                  data: [
                    {
                      value: process,
                      name: "",
                      itemStyle: {
                        // color: "#3776db",
                        normal: {
                          color: {
                            type: 'linear',
                            colorStops: [
                              // !! 在此添加想要的渐变过程色 !!
                              { offset: 0, color: color0 },
                              { offset: 1, color: color1 }
                            ]
                          },
                        }
                      },
                    },
                    {
                      value: 100 - process,
                      name: "",
                      itemStyle: {
                        color: "#264179",//透明色，也可以设置把其他颜色
                      },
                    },
                  ],
                }
              ]
            },
            data: []
          },
        ]
      }
    },
    created() {
      this.currentTime()
    },
    methods: {
      currentTime(){
        setInterval(()=>{
            this.getDate()
        },1000)
      },
      //获取当前时间
      getDate() {
        let date = new Date();
        let year = date.getFullYear(); // 年
        let month = date.getMonth() + 1; // 月
        let day = date.getDate(); // 日
        let week = date.getDay(); // 星期
        let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
        let hour = date.getHours(); // 时
        hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
        let minute = date.getMinutes(); // 分
        minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
        let second = date.getSeconds(); // 秒
        second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
        this.nowDate = `${year}年${month}月${day}日 ${hour}时${minute}分${second}秒 ${weekArr[week]}`;
      }
    }
  }
</script>

<style lang="scss" scoped>
.overview{
  width:100%;
  height: 100%;
  // background-image:url('~@/assets/image/bg.jpg');
  background-origin:center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: scroll;
  .box-big-data{
    width: 100%;
    min-height: 100%;
    background-color: rgb(3, 60, 118);
    color: white;
    &-head {
      height: 5rem;
      background: url('~@/assets/image/head_bg.png') no-repeat center center;
      background-size: 100% 100%;
      position: relative;
      h1 {
        padding-top: 20px;
        color: #bde4ff;
        font-weight: bolder;
        letter-spacing: 2px;
        font-size: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    &-time {
      position: absolute;
      right: 20px;
      top: 10px;
      line-height: 0.75rem;
      color: rgba(255, 255, 255, 0.7);
      font-size: 1.3rem;
      font-family: electronicFont;
    }
    .refereh {
      position: absolute;
      right: 20%;
      top: 6px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 0.75rem;
      font-size: 1rem;
      font-family: electronicFont;
      .hekit-ui-btn {
        color: rgba(255, 255, 255, 0.7);
      }
    }
    &-board {
      height: auto;
      width: 100%;
      padding: 15px 5% 20px 5%;
      .board-ul {
        display: flex;
        justify-content: space-between;
        .board-ul-item {
          width: 20%;
          height: 100%;
          .board-cont {
            height: 100%;
            border: 2px solid #1070aa;
            padding: 5px 5px;
            position: relative;
            color: #fff;
            .title {
              font-size: 15px;
              padding-top: 0px;
              color: #fff;
              text-align: center;
              margin: 0;
            }
            &::before {
              position: absolute;
              content: '';
              width: 10px;
              height: 10px;
              border: 2px solid #00deff;
              background: #0e004a;
              box-shadow: 0 0 5px #00deff;
              left: -5px;
              top: -5px;
            }
            &::after {
              position: absolute;
              content: '';
              width: 10px;
              height: 10px;
              border: 2px solid #00deff;
              background: #0e004a;
              box-shadow: 0 0 5px #00deff;
              right: -5px;
              top: -5px;
            }
            .forb {
              position: absolute;
              width: 100%;
              left: 0;
              bottom: 0;
              &::before {
                position: absolute;
                content: '';
                width: 10px;
                height: 10px;
                border: 2px solid #00deff;
                background: #0e004a;
                box-shadow: 0 0 5px #00deff;
                left: -5px;
                top: -5px;
              }
              &::after {
                position: absolute;
                content: '';
                width: 10px;
                height: 10px;
                border: 2px solid #00deff;
                background: #0e004a;
                box-shadow: 0 0 5px #00deff;
                right: -5px;
                top: -5px;
              }
            }
            .item-line {
              text-align: center;
              .number {
                font-size: 20px;
                font-weight: bold;
                letter-spacing: 2px;
                cursor: pointer;
              }
              .desc {
                font-size: 12px;
              }
              .yingshou {
                color: #ff6316;
              }
              .unit {
                font-size: 12px;
                font-style: normal;
                padding-left: 5px;
              }
            }
          }
        }
      }
    }
    &-charts {
      width: 100%;
      padding: 10px;
      .charts-ul {
        padding-right: 20px;
        overflow: hidden;
        .chart-item {
          width: 33.333%;
          padding-left: 20px;
          padding-bottom: 20px;
          float: left;
          .chart-item-cont {
            border: 2px solid #005ce8;
            box-shadow: inset 0 0 10px #0776b566;
            position: relative;
            border-radius: 7px;
            &::before {
              position: absolute;
              width: calc(100% - 6px);
              height: calc(100% - 6px);
              border: 2px solid #005ce8;
              left: 3px;
              top: 3px;
              content: '';
              border-radius: 5px;
              opacity: 0.6;
              z-index: 1000;
              pointer-events: none;
            }
            .head {
              text-align: center;
              position: relative;
              .title {
                display: inline-block;
                background: url()
                  repeat-x;
                position: relative;
                height: 27px;
                line-height: 24px;
                color: #fff;
                font-size: 16px;
                &::before {
                  content: '';
                  background: url();
                  display: inline-block;
                  vertical-align: middle;
                  width: 50px;
                  height: 27px;
                  position: absolute;
                  left: -50px;
                  top: 0;
                }
                &::after {
                  content: '';
                  background: url()
                    no-repeat;
                  display: inline-block;
                  vertical-align: middle;
                  width: 50px;
                  height: 27px;
                  position: absolute;
                  right: -50px;
                  top: 0;
                }
              }
              .link {
                position: absolute;
                right: 20px;
                top: 8px;
                color: #fff;
                font-size: 12px;
                :hover {
                  font-weight: bold;
                }
              }
              .xiazuan {
                position: absolute;
                left: 20px;
                top: 8px;
                color: #fff;
                font-size: 12px;
                :hover {
                  font-weight: bold;
                }
              }
            }
            .chart-cont {
              overflow: hidden;
              // padding: 20px;
              box-sizing: border-box;
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
